<template>
  <div class="article-list">
    <div class="list-wrapper">
      <div class="article-item flex-center" v-for="item in articles" :key="item.id">
        <ArticleCard :article="item" style="width: 80%" />
      </div>
    </div>

    <Empty v-if="!articles.length && !pageParams.loading" />

    <div
      class="article-status color-999 flex-center"
      v-show="!(!articles.length && !pageParams.loading)"
    >
      <div
        v-if="pageParams.loading"
        v-loading="true"
        class="loading box"
        background="rgba(0, 0, 0, 0.7)"
      ></div>
      <div v-else-if="pageParams.error">加载失败,下拉重新加载...</div>
      <div v-else-if="pageParams.finished">已经加载完毕咯^_^...</div>
      <div v-else>下拉加载更多</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { nextTick, onMounted, onUnmounted, reactive } from 'vue'
import ArticleCard from './ArticleCard.vue'
import type { ArticleOutline } from './ArticleCard.vue'
import { getArticles } from '@/apis/article'
import Empty from './base/Empty.vue'
import { elLargeViewport } from '@/utils/base'
const props = defineProps<{ params: any }>()
const articles: ArticleOutline[] = reactive([])
const pageParams = reactive({
  pageIndex: 0,
  pageSize: 10,
  total: 0,
  loading: true,
  error: false,
  finished: false
})

function resetPageParams() {
  pageParams.pageIndex = 0
  pageParams.pageSize = 10
  pageParams.total = 0
  pageParams.loading = true
  pageParams.error = false
  pageParams.finished = false
}

async function getArticleList() {
  try {
    if (pageParams.finished) {
      return
    }
    pageParams.pageIndex++
    pageParams.loading = true
    const res: any = await getArticles({
      pageIndex: pageParams.pageIndex,
      pageSize: pageParams.pageSize,
      ...props.params
    })
    console.log('res:', res)
    articles.push(...res.list)
    pageParams.total = res.total
    pageParams.error = false
    if (articles.length >= res.total) {
      pageParams.finished = true
    } else {
      pageParams.finished = false
    }
  } catch (error) {
    console.log('error:', error)
    pageParams.error = true
    pageParams.pageIndex--
    return Promise.reject(error)
  } finally {
    pageParams.loading = false
  }
}
let intersectionObserver: any = null
function IterObserver() {
  const intersectionObserver = new IntersectionObserver((entries) => {
    // console.log('entries:', entries)
    // 如果 intersectionRatio 为 0，则目标在视野外，

    if (entries[0].intersectionRatio <= 0) {
      // 我们不需要做任何事情   。  没有交融
      return
    }

    // 满足intersection 条件

    // if (entries[0].isIntersecting) {
    // }
    if (!articles.length) {
      //第一次禁止触发
      return
    }
    getArticleList()
  })
  // 开始监听
  intersectionObserver.observe(document.querySelector('.article-status')!)
  return intersectionObserver
}

// 卸载
onUnmounted(() => {
  intersectionObserver.unobserve(document.querySelector('.article-status')!)
})

onMounted(() => {
  intersectionObserver = IterObserver()
  // 根据情况判断是否要加载两次,其实应该一直循环,但没必要
  getArticleList().then(() => {
    nextTick(() => {
      if (!elLargeViewport('.article-list')) {
        getArticleList()
      }
    })
  })
})

defineExpose({
  resetPageParams,
  intersectionObserver
})
</script>

<style lang="scss" scoped>
.loading {
  height: 44px;
}
.article-status {
  min-height: 40px;
}

.list-wrapper {
  display: flex;
  flex-wrap: wrap;

  .article-item {
    margin-bottom: 12px;
    box-sizing: border-box;
    width: calc(100% / 2);
  }
}
</style>
